<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#app {
				width: 500px;
				height: 1200px;
				margin: 0 auto;
			}
			ul {
				list-style: none;
				width: 400px;
			}
			ul li {
				float: left;
				width: 33%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: beige;
				cursor: pointer;
			}
		  
			#app div {
				
				width: 400px;
				height: 300px;
				/* margin-left: 40px; */
			}
			img {
				
				display: none;
				width: 100%;
				height: 100%;
			}
			.active {
				background-color: #7FFFD4;
			}
			.current img{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li :class='currentIndex==index?"active":""' v-for="(item, index) in list" :key="index" @click="show(index)">{{item.title}}</li>
			</ul>
			<div :class='currentIndex==index?"current":""' v-for="(item, index) in list" :key="index" >
				<img :src="item.img" >
			</div>
		</div>
		<script src="../vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					currentIndex: 0,
					list: [
						{
							id: 1,
							title:'稻城1',
							img: '../images/tab1.jpg'
						},
						{
							id: 2,
							title:'稻城2',
							img: '../images/tab2.jpeg'
						},
						{
							id: 3,
							title:'稻城3',
							img: '../images/tab3.jpg'
						}
					]
				},
				methods: {
				  show(index) {
						this.currentIndex = index
					}
				}
			})
		</script>
	</body>
</html>

